<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ val }}
</div>
<div id="app">

</div>

<template id="app2">
  <div>
    {{val}}
    {{person.name}}
    {{person.age}}
    <button @click="fn2">父组件的按钮2</button>
    <button @click="fn3">父组件的按钮3</button>
    <counter aa='22'></counter>
    <h3>测试2</h3>
    <div>
      <button @click="zhangsan_fn">父组件的测试按钮1</button>
      张三:{{zhangsan.name}}{{zhangsan.age}}
    </div>
    <h3>测试3 toRefs</h3>
    <div>
      <button @click="dag_fn">父组件的测试按钮2</button>
      狗名:{{name}}
    </div>
    <h3>测试4 toRef</h3>
    <div>
      <button @click="dogColor_fn">父组件的测试按钮3</button>
      狗颜色:{{dogName}}
    </div>
  </div>
</template>

<script>

  //组件
  const Counter={
    template:`<div>2222 <button @click="fn1">按钮1</button></div>`,
    //用context接收父元素的值时候得注释掉 props
  /*  props:{
      aa:{type:String}
    },  */
    setup(props,context){
      //1.可以从props拿到子组件的值
      // console.log(props)
/////////////////****//////////////////////////
      //2.可以从context拿到子组件的值
      let {attrs,emit} =context
      let fn1=()=>{
        emit('bb')
      }
       
      console.log('context',context)
      console.log('context',attrs.aa)
      return {
        fn1
      }
    },
  }
  //父组件
const HelloVueApp = {
  template:"#app2",
  components:{Counter},

  setup(props,con){
    let val = Vue.ref("初始化");//string number
    let person = Vue.reactive({name:"lisi",age:20})// object array
    let dogs = Vue.reactive({name:"telanp",age:22})// object array
    const fn2 = () => { val.value = "改变的" }
    const fn3 = () => { person.age = 30 }
    
    // 实验2
    const zhangsan = Vue.ref({ age: 50, name: "张三" });
    const zhangsan_fn = () => { zhangsan.value.name = "我是小明" ;console.log(zhangsan.value.name,"zhangsan")}

    //实验3 解决结构对象出来的值改变没有响应式 toRefs
    // let {name} =person  //不加toRefs不具响应式
    let {name} =Vue.toRefs(person) 
    const dag_fn = () => { 
      // person.name="huahua"
      name.value = "我是heihei" ;
      console.log("dag_fn",name)
    }
   
     //实验4 响应式对象加对象没有的键值对 toRef
     let dogName=Vue.toRef(dogs,'红色')
     const dogColor_fn = () => { 
      // person.name="huahua"
       dogName.value='黄色'
       console.log("dogColor_fn",dogName.value)
    }

    return {
      val,
      fn2,
      fn3,
      person,
      zhangsan,
      zhangsan_fn,
      dag_fn,
      name,
      dogColor_fn,
      dogName,
    }
  }
/*   data() {
    return {
      message: 'Hello Vue1!!'
    }
  } */
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>